<!--
	全国基础数据分布图
	Created by Penglei on 2023/08/16
-->
<template>
  <div class="app-container">
    <!-- 公共顶部 -->
    <large-screen-header />
    <!-- 主体部分 -->
    <div class="app-main">
      <!-- 左侧 -->
      <div class="app-left">
        <!-- 类型选择 -->
        <TypeSelection
          ref="typeSelectionRef"
          :list="[
            { lable: '人口公里网格', value: 'population' },
            { lable: '经济公里网格', value: 'economy' },
            { lable: '建筑物公里网格', value: 'building' },
            { lable: '场地类别', value: 'siteType' },
            { lable: '道路', value: 'road' },
            { lable: '危化企业', value: 'enterprise' },
            { lable: 'PGA等级面', value: 'pag' },
            { lable: '历史地震', value: 'historical' },
            { lable: 'DEM', value: 'dem' },
            { lable: '加油站', value: 'gasStation' },
          ]"
          @changeType="onChangeType"
        ></TypeSelection>
        <!-- 地震信息，左侧类别选择历史地震时显示 -->
        <EarthquakeInformation v-if="curType == 'historical'" ref="earthquakeInformationRef"></EarthquakeInformation>
      </div>
      <!-- 中心部分 -->
      <div class="app-center">
        <!-- 标题 -->
        <!-- <headline name="全国基础数据分布图" /> -->
        <!-- 地图 -->
        <div class="app-map">
          <SystemSelect :styles="{ position: 'absolute', top: '80px', left: '42px' }" />
          <OlMap ref="olmapRef" :center="mapCenter" :zoom="mapZoom" :refId="geologicaldisaster" style="height: 100%" @getMap="getMap"></OlMap>
          <ComLegend
            v-if="!hideComLegend"
            :style="legendStyle"
            title="图例"
            subTitle=""
            :items="legendItems"
            :items-per-column="12"
          ></ComLegend>
        </div>
      </div>
      <!-- 右侧 -->
      <div class="app-right">
        <div class="app-right-item height-300">
          <subheadings name="数据管理系统使用情况" />
          <AccessStatistics ref="accessStatisticsRef"></AccessStatistics>
        </div>
        <div v-if="curType == 'population'" class="app-right-item">
          <subheadings name="图例" />
          <PanelLegend
            title="人口公里网格"
            subTitle="单位:人/平方公里"
            :list="[
              { name: '0', color: 'rgb(255, 243, 192, 1)', sort: 1 },
              { name: '1-5', color: 'rgb(251, 230, 141)', sort: 3 },
              { name: '6-10', color: 'rgb(250, 220, 96)', sort: 5 },
              { name: '11-50', color: 'rgb(250, 213, 62)', sort: 7 },
              { name: '51-100', color: 'rgb(249, 206, 29)', sort: 9 },
              { name: '101-300', color: 'rgb(243, 190, 26)', sort: 11 },
              { name: '301-500', color: 'rgb(244, 168, 22)', sort: 13 },
              { name: '501-1000', color: 'rgb(249, 142, 26)', sort: 2 },
              { name: '1001-2000', color: 'rgb(239, 111, 12)', sort: 4 },
              { name: '2001-5000', color: 'rgb(239, 95, 12)', sort: 6 },
              { name: '5001-10000', color: 'rgb(255, 55, 41)', sort: 8 },
              { name: '10001-20000', color: 'rgb(243, 16, 0)', sort: 10 },
              { name: '20001-50000', color: 'rgb(209, 14, 0)', sort: 12 },
              { name: '50000以上', color: 'rgb(170, 11, 0)', sort: 14 },
            ]"
          ></PanelLegend>
        </div>
        <div v-else-if="curType == 'economy'" class="app-right-item">
          <subheadings name="图例" />
          <PanelLegend
            title="经济公里网格"
            subTitle="单位: 万元/平方公里"
            :list="[
              { name: '0', color: 'rgb(255, 203, 203)', sort: 1 },
              { name: '0-0.1', color: 'rgb(255, 159, 159)', sort: 3 },
              { name: '0.1-0.5', color: 'rgb(255, 121, 121)', sort: 5 },
              { name: '0.5-1', color: 'rgb(255, 85, 85)', sort: 7 },
              { name: '1-5', color: 'rgb(255, 51, 51)', sort: 9 },
              { name: '5-10', color: 'rgb(255, 16, 16)', sort: 11 },
              { name: '10-50', color: 'rgb(255, 0, 0)', sort: 13 },
              { name: '50-100', color: 'rgb(231, 0, 0)', sort: 2 },
              { name: '100-300', color: 'rgb(206, 0, 0)', sort: 4 },
              { name: '300-500', color: 'rgb(168, 0, 0)', sort: 6 },
              { name: '500-1000', color: 'rgb(143, 0, 0)', sort: 8 },
              { name: '1000-2000', color: 'rgb(121, 0, 0)', sort: 10 },
              { name: '2000-5000', color: 'rgb(96, 0, 0)', sort: 12 },
              { name: '5000以上', color: 'rgb(96, 0, 0)', sort: 14 },
            ]"
          ></PanelLegend>
        </div>
        <div v-else-if="curType == 'building'" class="app-right-item">
          <subheadings name="图例" />
          <PanelLegend
            title="建筑物公里网格"
            subTitle="单位:平方米/平方公里"
            :list="[
              { name: '0', color: 'rgb(246, 216, 255)', sort: 1 },
              { name: '0-0.1', color: 'rgb(240, 190, 255)', sort: 3 },
              { name: '0.1-0.5', color: 'rgb(234, 166, 255)', sort: 5 },
              { name: '0.5-1', color: 'rgb(227, 136, 255)', sort: 7 },
              { name: '1-5', color: 'rgb(220, 103, 255)', sort: 9 },
              { name: '5-10', color: 'rgb(211, 65, 255)', sort: 11 },
              { name: '10-30', color: 'rgb(203, 30, 255)', sort: 13 },
              { name: '30-50', color: 'rgb(196, 0, 255)', sort: 15 },
              { name: '50-100', color: 'rgb(179, 0, 233)', sort: 2 },
              { name: '100-200', color: 'rgb(162, 0, 211)', sort: 4 },
              { name: '200-500', color: 'rgb(141, 0, 183)', sort: 6 },
              { name: '500-800', color: 'rgb(125, 0, 162)', sort: 8 },
              { name: '800-1200', color: 'rgb(108, 0, 140)', sort: 10 },
              { name: '1200-2000', color: 'rgb(84, 0, 109)', sort: 12 },
              { name: '2000以上', color: 'rgb(61, 0, 79)', sort: 14 },
            ]"
          ></PanelLegend>
        </div>
        <template v-else-if="curType == 'siteType'">
          <div class="app-right-item height-200">
            <subheadings name="场地类型" />
            <SiteType ref="siteTypeRef" @change="onChangeSiteType"></SiteType>
          </div>
          <div class="app-right-item height-400">
            <subheadings name="各省 (直辖市) 场地类型面积统计" />
            <TypeAreaStatistics ref="typeAreaStatisticsRef" @change="onChangeTypeAreaStatistics"></TypeAreaStatistics>
          </div>
        </template>
        <template v-else-if="curType == 'road'">
          <div class="app-right-item height-200">
            <subheadings name="公路行政等级" />
            <RoadGrade ref="roadGradeRef" @change="onChangeRoadGrade"></RoadGrade>
          </div>
          <div class="app-right-item height-400">
            <subheadings name="各省（直辖市）道路长度统计" />
            <RoadLengthStatistics
              ref="roadLengthStatisticsRef"
              @change="onChangeRoadLengthStatistics"
            ></RoadLengthStatistics>
          </div>
        </template>
        <template v-else-if="curType == 'enterprise'">
          <div class="app-right-item height-200">
            <subheadings name="类型" />
            <EnterpriseType ref="enterpriseTypeRef" @change="onChangeEnterpriseType"></EnterpriseType>
          </div>
          <div class="app-right-item height-400">
            <subheadings name="各省（直辖市）危化企业数量统计" />
            <EnterpriseCountStatistics ref="enterpriseCountStatisticsRef"></EnterpriseCountStatistics>
          </div>
        </template>
        <template v-else-if="curType == 'pag'">
          <div class="app-right-item height-300">
            <subheadings name="PGA等级面" />
            <PagLevelSurface ref="pagLevelSurfaceRef" @change="onChangePagLevelSurface"></PagLevelSurface>
          </div>
        </template>
        <template v-else-if="curType == 'historical'">
          <div class="app-right-item height-180">
            <subheadings name="震级" />
            <EarthquakeMagnitude
              ref="earthquakeMagnitudeRef"
              @change="onChangeEarthquakeMagnitude"
            ></EarthquakeMagnitude>
          </div>
          <div class="app-right-item height-420">
            <subheadings name="各省（直辖市）历史地震" />
            <EarthquakeHistorical
              ref="earthquakeHistoricalRef"
              @change="onChangeEarthquakeHistorical"
            ></EarthquakeHistorical>
          </div>
        </template>
        <template v-else-if="curType == 'gasStation'">
          <div class="app-right-item height-200">
            <subheadings name="类型" />
            <GasStationType ref="gasStationTypeRef" @change="onChangeGasStationType"></GasStationType>
          </div>
          <div class="app-right-item height-400">
            <subheadings name="各省（直辖市）加油站数量统计" />
            <GasStationStatistics ref="gasStationStatisticsRef"></GasStationStatistics>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup name="BasicData">
// 类型选择
import TypeSelection from './components/TypeSelection';
// 系统选择
import SystemSelect from '@/components/SystemSelect';

// 访问统计
import AccessStatistics from './components/AccessStatistics';
// 人口公里网格-图例面板
import PanelLegend from './components/PanelLegend';
// 场地类型
import SiteType from './components/SiteType';
// 场地类型面积统计
import TypeAreaStatistics from './components/TypeAreaStatistics';
// 道路行政等级
import RoadGrade from './components/RoadGrade';
// 道路长度统计
import RoadLengthStatistics from './components/RoadLengthStatistics';
// 道路行政等级
import EnterpriseType from './components/EnterpriseType';
// 各省（直辖市）危化企业数量统计
import EnterpriseCountStatistics from './components/EnterpriseCountStatistics';
// PGA等级面
import PagLevelSurface from './components/PagLevelSurface';
// 地震信息
import EarthquakeInformation from './components/EarthquakeInformation';
// 震级
import EarthquakeMagnitude from './components/EarthquakeMagnitude';
// 各省（直辖市）历史地震
import EarthquakeHistorical from './components/EarthquakeHistorical';
// 加油站类型
import GasStationType from './components/GasStationType';
// 各省（直辖市）加油站数量统计
import GasStationStatistics from './components/GasStationStatistics';

// 当前实例
const { proxy } = getCurrentInstance();
// 当前路由
const route = useRoute();

// 当前类别
let curType = ref('population');
// 选择左侧类型
const onChangeType = (item) => {

  //地图重置
  mapInstance.value.getView().setCenter(mapCenter.value);
  mapInstance.value.getView().setZoom(mapZoom.value);

  curType.value = item.value;

  if(curType.value == "population") {
    //人口公里网络
    showPopulationLayers();

  }else if(curType.value == "economy"){
    //经济公里网格
    showEconomyLayers();

  }else if(curType.value == "building"){
    //j建筑公里网格
    showBuildingLayers();

  }else if(curType.value == "siteType"){
    //场地类别
    showSiteTypeLayers(siteType.value);
    
  }else if(curType.value == "road"){
    //道路
    showRoadLayers(roadType.value);

  }else if(curType.value == "enterprise"){
    //危化企业
    showEnterpriseLayers(enterpriseType.value);

  }else if(curType.value == "pag"){
    //PGA等级面
    showPagLayers(1);

  }else if(curType.value == "historical"){
    //历史地震
    showHistoricalLayers(quakeType.value);

  }else if(curType.value == "dem"){
    //DEM
    showDemLayers();

  }else if(curType.value == "gasStation"){
    //加油站
    showGasStationLayers(gasType.value);

  }

};

// 场地类型
const siteTypeRef = ref();
// 场地类型面积统计，组件
const typeAreaStatisticsRef = ref();
// 选择场地类型
const onChangeSiteType = (type) => {
  if (typeAreaStatisticsRef.value) {
    typeAreaStatisticsRef.value.onChangeSideTab(type);
  }
  siteType.value = type;
  showSiteTypeLayers(siteType.value);
};
// 选择场地类型
const onChangeTypeAreaStatistics = (type) => {
  if (siteTypeRef.value) {
    siteTypeRef.value.siteType = type;
  }
};

// 公路行政等级，组件
const roadGradeRef = ref();
// 道路长度统计，组件
const roadLengthStatisticsRef = ref();
// 选择道路行政等级
const onChangeRoadGrade = (type) => {
  if (roadLengthStatisticsRef.value) {
    roadLengthStatisticsRef.value.onChangeSideTab(type);
  }
  let temps = [];
  type.forEach((item) => {
    if(Number(item) == 0) {
      temps.push('G');
    }else if(Number(item) == 1) {
      temps.push('S');
    }else if(Number(item) == 2) {
      temps.push('X');
    }else if(Number(item) == 3) {
      temps.push('Y');
    }else if(Number(item) == 4) {
      temps.push('Z');
    }else if(Number(item) == 5) {
      temps.push('Q');
    }
  });
  showRoadLayers(temps);

};
// 选择道路行政等级
const onChangeRoadLengthStatistics = (type) => {
  if (roadGradeRef.value) {
    roadGradeRef.value.siteType = type;
  }
};

// 选择危化企业等级
const onChangeEnterpriseType = (type) => {
  showEnterpriseLayers(type);

};

// PGA等级面
const onChangePagLevelSurface = (type) => {

  pagType.value = Number(type) + 1;
  showPagLayers(pagType.value);
};

// 震级，组件
const earthquakeMagnitudeRef = ref();
// 历史地震，组件
const earthquakeHistoricalRef = ref();
// 震级
const onChangeEarthquakeMagnitude = (type) => {
  if (earthquakeHistoricalRef.value) {
    earthquakeHistoricalRef.value.onChangeSideTab(type);
  }
  
  showHistoricalLayers(type);
};
// 震级选择
const onChangeEarthquakeHistorical = (type) => {
  if (earthquakeMagnitudeRef.value) {
    earthquakeMagnitudeRef.value.earthquakeMagnitude = type;
  }
};

// 加油站类型选择
const onChangeGasStationType = (type) => {
  showGasStationLayers(type);

};

// start
import OlMap from '@/components/Olmap';
import { Style, Circle as CircleStyle, Fill, Stroke, Icon, Text } from 'ol/style';
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer';
import { Point } from 'ol/geom';
import { Feature } from 'ol';
import { OSM, Vector as VectorSource } from 'ol/source';
// start
import { GeoJSON as GeoJSonFormat } from 'ol/format';
import { getCurrentInstance, ref } from 'vue';
import ComLegend from '@/components/ComLegend';
import { getChinaBaseMap, getBaseDir,getGridLayer } from '@/map/projMap.js';
import { getSqlTempLayer } from '@/utils/sqlTempLayersSet';
// end
// start
const olmapRef = ref(null);
const mapCenter = ref([105, 31.5]);
const mapZoom = ref(4);
const mapInstance = ref(null);
const vectorLayer = ref(null);

const hideComLegend = ref(true);
const legendStyle = ref({position: 'absolute',left:'42px',bottom: '150px'});
const legendItems = ref([
  { label: 'I 1类场地', color: 'rgba(0, 11, 154, 1)', w: 10, h: 8, r: 0 },
  { label: 'II 类场地', color: 'rgba(0, 12, 187, 1)', w: 10, h: 8, r: 0 },
  { label: 'III 类场地', color: 'rgba(21, 55, 165, 1)', w: 10, h: 8, r: 0 },
  { label: 'IV 类场地', color: 'rgba(20, 74, 255, 1)', w: 10, h: 8, r: 0 },
  { label: 'V 类场地', color: 'rgba(52, 99, 255, 1)', w: 10, h: 8, r: 0 },
  { label: '水体', color: 'rgba(70, 109, 241, 1)', w: 10, h: 8, r: 0 },
  { label: 'I 0类场地', color: 'rgba(103, 139, 255, 1)', w: 10, h: 8, r: 0 },
]);
const siteTypeLegendItems = ref([
  { label: 'I 1类场地', color: 'rgba(0, 11, 154, 1)', w: 10, h: 8, r: 0 },
  { label: 'II 类场地', color: 'rgba(0, 12, 187, 1)', w: 10, h: 8, r: 0 },
  { label: 'III 类场地', color: 'rgba(21, 55, 165, 1)', w: 10, h: 8, r: 0 },
  { label: 'IV 类场地', color: 'rgba(20, 74, 255, 1)', w: 10, h: 8, r: 0 },
  { label: 'V 类场地', color: 'rgba(52, 99, 255, 1)', w: 10, h: 8, r: 0 },
  { label: '水体', color: 'rgba(70, 109, 241, 1)', w: 10, h: 8, r: 0 },
  { label: 'I 0类场地', color: 'rgba(103, 139, 255, 1)', w: 10, h: 8, r: 0 },
]);
const roadLegendItems = ref([
  { label: '国道', color: 'rgba(255, 37, 37, 1)', w: 10, h: 8, r: 0 },
  { label: '省道', color: 'rgba(253, 190, 65, 1)', w: 10, h: 8, r: 0 },
  { label: '县道', color: 'rgba(37, 255, 130, 1)', w: 10, h: 8, r: 0 },
  { label: '乡道', color: 'rgba(70, 255, 255, 1)', w: 10, h: 8, r: 0 },
  { label: '专用公路', color: 'rgba(227, 46, 255, 1)', w: 10, h: 8, r: 0 },
  { label: '其它公路', color: 'rgba(255, 57, 138, 1)', w: 10, h: 8, r: 0 },
]);
const demLegendItems = ref([
  { label: '-182 - 500', color: 'rgba(33, 130, 145, 1)', w: 10, h: 8, r: 0 },
  { label: '500-1000', color: 'rgba(82, 154, 156, 1)', w: 10, h: 8, r: 0 },
  { label: '1000-1500', color: 'rgba(123, 176, 163, 1)', w: 10, h: 8, r: 0 },
  { label: '1500-2000', color: 'rgba(167, 201, 173, 1)', w: 10, h: 8, r: 0 },
  { label: '2000-2500', color: 'rgba(212, 230, 184, 1)', w: 10, h: 8, r: 0 },
  { label: '2500-3000', color: 'rgba(255, 255, 191, 1)', w: 10, h: 8, r: 0 },
  { label: '3000-3500', color: 'rgba(237, 216, 152, 1)', w: 10, h: 8, r: 0 },
  { label: '3500-4000', color: 'rgba(217, 179, 117, 1)', w: 10, h: 8, r: 0 },
  { label: '4000-4500', color: 'rgba(196, 144, 84, 1)', w: 10, h: 8, r: 0 },
  { label: '4500-6000', color: 'rgba(176, 113, 55, 1)', w: 10, h: 8, r: 0 },
  { label: '≥6000', color: 'rgba(156, 85, 31, 1)', w: 10, h: 8, r: 0 },
]);
const historicalLegendItems = ref([
  { label: 'M<4', color: 'rgba(255, 37, 37, 1)', w: 10, h: 8, r: 0 },
  { label: '4≤M<5', color: 'rgba(253, 190, 65, 1)', w: 10, h: 8, r: 0 },
  { label: '5≤M<6', color: 'rgba(37, 255, 130, 1)', w: 10, h: 8, r: 0 },
  { label: '6≤M<7', color: 'rgba(70, 255, 255, 1)', w: 10, h: 8, r: 0 },
  { label: '7≤M<8', color: 'rgba(227, 46, 255, 1)', w: 10, h: 8, r: 0 },
  { label: 'M>8', color: 'rgba(255, 57, 138, 1)', w: 10, h: 8, r: 0 },
]);
const populationColors = ['rgba(255,243,192,1)','rgba(251,230,141,1)','rgba(250,220,96,1)','rgba(250,213,62,1)','rgba(249,206,29,1)','rgba(243,190,26,1)','rgba(244,168,22,1)','rgba(249,142,26,1)','rgba(239,111,12,1)',];
const economyColors = ['rgba(255, 206, 206, 1)','rgba(255, 170, 170, 1)','rgba(255, 121, 121, 1)','rgba(255, 85, 85, 1)','rgba(255, 51, 51, 1)','rgba(255, 16, 16, 1)','rgba(231, 0, 0, 1)','rgba(206, 0, 0, 1)','rgba(168, 0, 0, 1)',];
const buildingColors = ['rgba(246, 216, 255, 1)','rgba(237, 177, 255, 1)','rgba(227, 133, 255, 1)','rgba(217, 90, 255, 1)','rgba(207, 46, 255, 1)','rgba(196, 0, 255, 1)','rgba(169, 0, 219, 1)','rgba(136, 0, 185, 1)','rgba(114, 0, 148, 1)',];
const siteTypeColors = ['rgba(0, 11, 154, 1)','rgba(0, 12, 187, 1)','rgba(21, 55, 165, 1)','rgba(20, 74, 255, 1)','rgba(52, 99, 255, 1)','rgba(70, 109, 241, 1)','rgba(103, 139, 255, 1)',];
const pagColors = ['rgba(255, 201, 93, 1)','rgba(255, 182, 36, 1)','rgba(255, 145, 0, 1)','rgba(255, 102, 0, 1)',];
const enterpriseColors = ['rgba(227, 46, 255, 1)','rgba(37, 255, 130, 1)','rgba(255, 37, 37, 1)'];
const historicalColors = ['rgba(255, 37, 37, 1)','rgba(253, 190, 65, 1)','rgba(37, 255, 130, 1)','rgba(70, 255, 255, 1)','rgba(227, 46, 255, 1)','rgba(255, 57, 138, 1)'];
const roadColors = ['rgba(255, 37, 37, 1)','rgba(253, 190, 65, 1)','rgba(37, 255, 130, 1)','rgba(70, 255, 255, 1)','rgba(227, 46, 255, 1)','rgba(255, 57, 138, 1)'];

const roadType = ref(['G', 'S', 'X', 'Y', 'Z', 'Q']);
const siteType = ref(['0', '1', '2', '3', '4', '5', '6']);
const enterpriseType = ref(['0', '1', '2']);
const gasType = ref(['0', '1', '2']);
const quakeType = ref(['0', '1', '2', '3', '4', '5']);
const pagType = ref(1);

const getMap = (map) => {
  mapInstance.value = map.value;

  //   假数据
  //addPopulationFillLayer(populationColors,null);
  addProvinceNameLayer();
  showPopulationLayers(null);
};

function addProvinceNameLayer() {
  const geojsonSource = new VectorSource({
    url: getChinaBaseMap,
    format: new GeoJSonFormat(),
  });

  // 创建省份名称文本图层
  const textLayer = new VectorLayer({
    source: geojsonSource,
    zIndex: 3,
    style: function (feature) {
      const textstyle = new Style({
        text: new Text({
          font: '10px Calibri,sans-serif',
          fill: new Fill({ color: '#fff' }),
          text: feature.get('name'),
        }),
      });
      return textstyle;
    },
  });

  mapInstance.value.addLayer(textLayer);
}


function showLayerById(layerId) {
  let layers = mapInstance.value.getLayers();
  layers.forEach((layer) => {
    let lid = layer.get('id');
    if(lid) {
      if (lid.indexOf(layerId) != -1) {
        layer.setVisible(true);
      }else if (lid.indexOf('china') != -1) {
        layer.setVisible(true);
      }else {
        layer.setVisible(false);
      }
    }
  });
}

function getLayerById(layerId) {
  let returnLayer;
  let layers = mapInstance.value.getLayers();
  layers.forEach((layer) => {
    if (layer.get('id') == layerId) {
      returnLayer = layer;
    }
  });

  return returnLayer;
}

function showPopulationLayers() {
  //隐藏图例
  hideComLegend.value = true;

  showLayerById("population");
  olmapRef.value.showChinaBaseMapLayer();

  let fillLayer = getLayerById("population_fill");
  if(fillLayer) return;

  
  let url = '/iserver/services/map-datacenter/rest/maps/jc_population_grid@datacenter';
  getGridLayer(url).then((layer) => {
    layer.set('id', 'population_fill');
    layer.setZIndex(6);
    mapInstance.value.addLayer(layer);
  });

}

function showEconomyLayers() {
  //隐藏图例
  hideComLegend.value = true;

  showLayerById("economy");
  olmapRef.value.showChinaBaseMapLayer();

  let fillLayer = getLayerById("economy_fill");
  if(fillLayer) return;

  let url = '/iserver/services/map-datacenter/rest/maps/jc_gdp@datacenter';
  getGridLayer(url).then((layer) => {
    layer.set('id', 'population_fill');
    layer.setZIndex(6);
    mapInstance.value.addLayer(layer);
  });

}

function showBuildingLayers() {
  //隐藏图例
  hideComLegend.value = true;

  showLayerById("building");
  olmapRef.value.showChinaBaseMapLayer();

  let fillLayer = getLayerById("building_fill");
  if(fillLayer) return;

  let url = '/iserver/services/map-datacenter/rest/maps/jc_ds_gpb_gdzc_grid_total_housing@datacenter';
  getGridLayer(url).then((layer) => {
    layer.set('id', 'population_fill');
    layer.setZIndex(6);
    mapInstance.value.addLayer(layer);
  });
}

function showSiteTypeLayers(siteType) {
  //显示图例
  hideComLegend.value = false;
  legendItems.value = siteTypeLegendItems.value;
  legendStyle.value = {position: 'absolute',left:'42px',bottom: '150px'};

  showLayerById('site_types');
  olmapRef.value.showChinaBaseMapLayer();

  let allTypes = ['0','1','2','3','4','5','6'];
  allTypes.forEach((item) => {
    let type = Number(item) + 1;
    let id = 'site_types_' + type;
    if(siteType.indexOf(item) != -1) {

      let siteLayer = getLayerById(id);
      if(siteLayer) return;

      let url = '/iserver/services/map-datacenter/rest/maps/jc_site_category@datacenter';
      let sqlText = 'site_type like ' + type;
      getSqlTempLayer(url,sqlText).then((layer) => {
        layer.set('id', id);
        layer.setZIndex(6);
          mapInstance.value.addLayer(layer);
      });

    }else {
      let siteLayer = getLayerById(id);
      if(siteLayer) siteLayer.setVisible(false);

    }
  });
}

function showRoadLayers(roadType) {
  //显示图例
  hideComLegend.value = false;
  legendItems.value = roadLegendItems.value;
  legendStyle.value = {position: 'absolute',left:'42px',bottom: '150px'};

  showLayerById('road_lines');
  olmapRef.value.showChinaBaseMapLayer();
  
  let allTypes = ['G', 'S', 'X', 'Y', 'Z', 'Q'];
  allTypes.forEach((item) => {
    let id = 'road_lines_' + item;
    if(roadType.indexOf(item) != -1) {

      let siteLayer = getLayerById(id);
      if(siteLayer) return;

      let url = '/iserver/services/map-datacenter/rest/maps/jc_lrdl@datacenter';
      let sqlText = 'type like ' + item;
      getSqlTempLayer(url,sqlText).then((layer) => {
        layer.set('id', id);
        layer.setZIndex(6);
          mapInstance.value.addLayer(layer);
      });

    }else {
      let siteLayer = getLayerById(id);
      if(siteLayer) siteLayer.setVisible(false);

    }
  });
}

function showEnterpriseLayers(enterpriseType) {
  //隐藏图例
  hideComLegend.value = true;
  
  showLayerById('enterprise_types');
  olmapRef.value.showChinaBaseMapLayer();

  let allTypes = ['0','1','2'];
  allTypes.forEach((item) => {
    let type = Number(item) + 1;
    let id = 'enterprise_types_' + type;
    if(enterpriseType.indexOf(item) != -1) {

      let siteLayer = getLayerById(id);
      if(siteLayer) return;

      let url = '/iserver/services/map-datacenter/rest/maps/jc_dangerous_enterprise@datacenter';
      let sqlText = 'type like ' + type;
      getSqlTempLayer(url,sqlText).then((layer) => {
        layer.set('id', id);
        layer.setZIndex(6);
          mapInstance.value.addLayer(layer);
      });

    }else {
      let siteLayer = getLayerById(id);
      if(siteLayer) siteLayer.setVisible(false);

    }
  });
}


function showPagLayers(pagType) {
  //隐藏图例
  hideComLegend.value = true;

  let id = 'pag_types_' + pagType;
  showLayerById(id);

  olmapRef.value.showChinaBaseMapLayer();

  let siteLayer = getLayerById(id);
  if(siteLayer) return;
  
  let url = '/iserver/services/map-datacenter/rest/maps/jc_pga_002@datacenter';
  if(pagType == 1) {
    url = '/iserver/services/map-datacenter/rest/maps/jc_pga_002@datacenter';
  }else if(pagType == 2) {
    url = '/iserver/services/map-datacenter/rest/maps/jc_pga_010@datacenter';
  }else if(pagType == 3) {
    url = '/iserver/services/map-datacenter/rest/maps/jc_pga_063@datacenter';
  }

  getGridLayer(url).then((layer) => {
    layer.set('id', id);
    layer.setZIndex(6);
    mapInstance.value.addLayer(layer);
  });
  
}

function showHistoricalLayers(quakeType) {
  //显示图例
  hideComLegend.value = false;
  legendItems.value = historicalLegendItems.value;
  legendStyle.value = {position: 'absolute',left:'190px',bottom: '150px'};

  showLayerById('historical_types');
  olmapRef.value.showChinaBaseMapLayer();

  let allTypes = ['0','1','2','3','4','5'];
  allTypes.forEach((item) => {
    let type = Number(item) + 1;
    let id = 'historical_types_' + type;
    if(quakeType.indexOf(item) != -1) {

      let siteLayer = getLayerById(id);
      if(siteLayer) return;

      let urlInstrument = '/iserver/services/map-datacenter/rest/maps/jc_instrument_catalog@datacenter';
      let urlStrong = '/iserver/services/map-datacenter/rest/maps/jc_strong_catalog@datacenter';
      let sqlText1 = 'magnitude < 4.0';
      let sqlText2 = 'magnitude >= 4.5 AND magnitude < 5';
      if(type == 1) {
        sqlText1 = 'magnitude < 4.0';
      }else if(type == 2) {
        sqlText1 = 'magnitude >= 4.0 AND magnitude < 4.7';
        sqlText2 = 'magnitude >= 4.5 AND magnitude < 5';
      }else if(type == 3) {
        sqlText2 = 'magnitude >= 5.0 AND magnitude < 6.0';
      }else if(type == 4) {
        sqlText2 = 'magnitude >= 6.0 AND magnitude < 7.0';
      }else if(type == 5) {
        sqlText2 = 'magnitude >= 7.0 AND magnitude < 8.0';
      }else if(type == 6) {
        sqlText2 = 'magnitude >= 8.0';
      }

      if(type == 1) {
        getSqlTempLayer(urlInstrument,sqlText1).then((layer) => {
          layer.set('id', id);
          layer.setZIndex(6);
          mapInstance.value.addLayer(layer);
        });
        
      }else if(type == 2){
        getSqlTempLayer(urlInstrument,sqlText1).then((layer) => {
          layer.set('id', id+'_1');
          layer.setZIndex(6);
          mapInstance.value.addLayer(layer);
        });
        getSqlTempLayer(urlStrong,sqlText2).then((layer) => {
          layer.set('id', id+'_2');
          layer.setZIndex(6);
          mapInstance.value.addLayer(layer);
        });

      }else {
        getSqlTempLayer(urlStrong,sqlText2).then((layer) => {
          layer.set('id', id);
          layer.setZIndex(6);
          mapInstance.value.addLayer(layer);
        });
      }

    }else {
      if(type == 2) {
        let siteLayer1 = getLayerById(id+'_1');
        if(siteLayer1) siteLayer1.setVisible(false);
        let siteLayer2 = getLayerById(id+'_2');
        if(siteLayer2) siteLayer2.setVisible(false);

      }else {
        let siteLayer = getLayerById(id);
        if(siteLayer) siteLayer.setVisible(false);
      }

    }
  });

}

function showDemLayers() {
  //显示图例
  hideComLegend.value = false;
  legendItems.value = demLegendItems.value;
  legendStyle.value = {position: 'absolute',left:'42px',bottom: '150px'};
  
  showLayerById("dem");

  olmapRef.value.showDemMapLayer();
}

function  showGasStationLayers(gasType) {
  //隐藏图例
  hideComLegend.value = true;

  showLayerById('gasStation_types');
  olmapRef.value.showChinaBaseMapLayer();

  let allTypes = ['0','1','2'];
  allTypes.forEach((item) => {
    let type = Number(item) + 1;
    let id = 'gasStation_types_' + type;
    if(gasType.indexOf(item) != -1) {

      let siteLayer = getLayerById(id);
      if(siteLayer) return;

      let url = '/iserver/services/map-datacenter/rest/maps/jc_lfcp_gas_station@datacenter';
      let sqlText = 'scale like ' + type;
      getSqlTempLayer(url,sqlText).then((layer) => {
        layer.set('id', id);
        layer.setZIndex(6);
          mapInstance.value.addLayer(layer);
      });

    }else {
      let siteLayer = getLayerById(id);
      if(siteLayer) siteLayer.setVisible(false);

    }
  });
}

// 创建省份样式的函数
const createProvinceStyle = (feature) => {
  const randomColor = randomColors[Math.floor(Math.random() * randomColors.length)];
  return new Style({
    fill: new Fill({ color: randomColor }),
    // stroke: new Stroke({ color: 'blue', width: 1 }),
    text: new Text({
      font: '10px Calibri,sans-serif',
      fill: new Fill({ color: '#fff' }),
      text: feature.get('name'),
    }),
  });
};
// 创建图层的函数
const createProvinceLayer = () => {
  const geojsonSource = new VectorSource({
    url: getChinaBaseMap, // 替换为你的 GeoJSON 数据源路径
    format: new GeoJSonFormat(),
  });

  const provinceLayer = new VectorLayer({
    source: geojsonSource,
    zIndex: 1,
    style: function (feature) {
      return createProvinceStyle(feature);
    },
  });
  mapInstance.value.addLayer(provinceLayer);
};
// end

// 挂载完成
onMounted(() => {
  const type = route.params.type;
  if (type) {
    // 获取路由参数中的类型
    curType.value = type;
  }
});
</script>

<style scoped lang="scss">
.app-container {
  min-height: 1080px;
}

.app-map {
  width: 960px;
  height: 100%;
  overflow: visible;
}

// 左侧
.app-left {
  height: 100%;
  margin: 0;
  position: relative;
}

// 右侧
.app-right {
  height: 100%;
}

// 模块高度
.height-180 {
  height: 180px;
}
.height-200 {
  height: 200px;
}
.height-300 {
  height: 300px;
}
.height-400 {
  height: 400px;
}
.height-420 {
  height: 420px;
}
</style>
